<template>
  <div class="common-layout">
    <el-container class="maincontainer">
      <el-header>
        <img src="../assets/imgs/logo.png" alt="" srcset="" />
      </el-header>
      <el-container>
        <el-aside :class="asidee ? 'elasidee' : 'elasidex'"><AsideMenu></AsideMenu></el-aside>
        <el-main style="background-color: #fcfcfc">
          <MyBreadcrumb></MyBreadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import AsideMenu from '../components/home/AsideMenu.vue'
import MyBreadcrumb from '../components/home/MyBreadcrumb.vue'

import { useAsideStore } from '../stores/aside'
const asideStore = useAsideStore()

const { asidee } = storeToRefs(asideStore)
</script>

<style scoped lang="scss">
.elasidee {
  width: 12rem;
}
.elasidex {
  width: 4rem;
}
.common-layout {
  .maincontainer {
    img {
      height: 3rem;
    }
  }
}
.el-header {
  background-image: url(../assets/imgs/bg_top.png);
  height: 3rem;
}
.el-header {
  background-color: rgb(33, 37, 41);
}
.common-layout,
.maincontainer {
  height: 100%;
  background-color: rgb(84, 92, 100);
}
.el-aside {
  background-color: rgb(226, 236, 255);
}
</style>
